<nz-card nzTitle="批量创建设备">
    <nz-spin [nzSpinning]="isSpinning">
        <form nz-form [formGroup]="group">
            <app-set-id #childTag></app-set-id>

            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">名称</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="nameErrorTpl">
                    <input nz-input formControlName="name" />
                    <ng-template #nameErrorTpl let-control>
                        <ng-container *ngIf="control.hasError('required')">请输入名称!</ng-container>
                    </ng-template>
                </nz-form-control>
            </nz-form-item>

            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="desc">说明</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="">
                    <textarea nz-input formControlName="desc"></textarea>
                </nz-form-control>
            </nz-form-item>

            <nz-form-item>
                <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="amount">创建数量</nz-form-label>
                <nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="">
                    <nz-input-number formControlName="amount" [nzMin]="1"></nz-input-number>
                </nz-form-control>
            </nz-form-item>
        </form>
    </nz-spin>
    <div style="text-align: center;">
        <button nz-button nzType="primary" style="width:100px;" [nzLoading]="isSpinning"
            (click)="handleSubmit()">{{btnTitle}}</button>
    </div>
</nz-card>
<div *ngIf="datum&&datum.length" style="text-align: right;">
    <button nz-button nzType="primary" nzSize="large" (click)="handleExport()">
        <i nz-icon nzType="cloud-download"></i>
        导出
    </button>
</div>
<nz-table *ngIf="datum&&datum.length" #basicTable [nzData]="datum" [nzShowPagination]="false"
    [nzFrontPagination]="false">
    <thead>
        <tr>
            <th nzColumnKey="id" [nzSortFn]="true">ID</th>
            <th nzColumnKey="product_id">产品ID</th>
            <th nzColumnKey="group_id">分组ID</th>
            <th nzColumnKey="name" [nzSortFn]="true">名称</th>
            <th nzColumnKey="desc">说明</th>
            <th nzColumnKey="created" [nzSortFn]="true">日期</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let data of basicTable.data; let i = index">
            <td>{{data.id}}</td>
            <td>{{data.product_id}}</td>
            <td>{{data.group_id}}</td>
            <td>{{data.name}}</td>
            <td>{{data.desc}}</td>
            <td>{{data.created | date}}</td>
        </tr>
    </tbody>
</nz-table>
